<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>天天放心购－用户中心</title>
    <link rel="stylesheet" th:href="@{/css/reset.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/main.css}" type="text/css">
    <script th:src="@{/js/jquery-1.12.4.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery-ui.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/config.js}" type="text/javascript"></script>
</head>
<body>

<!--头部  开始-->
<div th:include="~{global/header :: header}"></div>
<!--头部 结束-->

<!--左边目录 开始-->
<div class="search_bar clearfix">
    <a th:href="@{/index}" class="logo fl"><img th:src="@{/images/logo.png}"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
    <div th:include="~{global/search :: search}"></div>
</div>
<div class="main_con clearfix">
    <div class="left_menu_con clearfix">
        <h3>用户中心</h3>
        <ul>
            <li><a th:href="@{/user/record}">· 个人信息</a></li>
            <li><a th:href="@{/user/order/list}">· 全部订单</a></li>
            <li><a th:href="@{/user/address/list}">· 收货地址</a></li>

        </ul>
    </div>
    <!--左边目录 结束-->

    <!--右边内容 开始-->
    <div class="right_content clearfix">
        <div class="common_title2">
            <span style="float: left">收货地址</span>
            <button style="float: right" th:onclick="addNewAddress()">新增地址</button>
        </div>

        <div class="site_con" th:if="${addressList}">
            <dl>
                <dt th:each="address:${addressList}" th:if="${address.defaultAddress==true}"><span th:text="'当前地址: '+${address.name}+' '+${address.phone}+' '+${address.detailAddress}"></span>
                    <a href="javascript:void(0)" th:onclick="switchEdit(true,[[${address}]])" style="float: right">[编辑]</a>
                </dt>
            </dl>
            <dl>
                <dt th:each="address:${addressList}" th:if="${address.defaultAddress==false}"><span th:text="${address.name}+' '+${address.phone}+' '+${address.detailAddress}"></span>
                    <a href="javascript:void(0)" th:onclick="switchEdit(true,[[${address}]])" style="float: right">[编辑]</a>
                    <a href="javascript:void(0)" th:onclick="setDefaultAddress([[${address.id}]])" style="float: right">[设为默认地址]</a>
                </dt>


            </dl>
        </div>
        <div id="editAddressFrom" hidden>
            <h3 class="common_title2">编辑地址</h3>
            <div class="site_con">
                <form>
                    <input id="addressId" name="id" type="hidden" value="">
                    <div class="form_group">
                        <label>收件人：</label>
                        <input id="addressName" name="uname" type="text" value="">
                    </div>
                    <div class="form_group form_group2">
                        <label>详细地址：</label>
                        <textarea id="addressDetail" class="site_area" name="uaddr"></textarea>
                    </div>
                    <div class="form_group">
                        <label>邮编：</label>
                        <input id="addressCode" name="uyoub" type="text" value="">
                    </div>
                    <div class="form_group">
                        <label>手机：</label>
                        <input id="addressPhone" name="utel" type="text" value="">
                    </div>

                    <input class="info_submit" type="button" value="提交" th:onclick="goAdd()"/>
                    <input class="info_submit" type="button" value="取消" th:onclick="switchEdit(false)"/>
                </form>
            </div>
        </div>

    </div>
</div>
<!--右边内容 结束-->

<!--底部 开始-->
<div th:include="~{global/header :: footer}"></div>
<!--底部 结束-->

</body>
</html>
<script>

    let isNew = false;
    let pending = false;

    // 切换编辑地址表单显示/隐藏
    function switchEdit(isEdit,address) {
        console.log(Config)
        isNew = false;
        console.log('接收到的地址>>>', address)
        if (isEdit){
            writeAddress(address);
            $('#editAddressFrom').show();
        }else{
            $('#editAddressFrom').hide();
            cleanAddress();
        }
    }

    // 提交表单保存地址
    function goAdd() {
        // 获取编辑地址表单数据封装对象
        var address = getAddress();
        if (checkAddress(address)) {
            console.log('校验成功')
            if (pending) {
                return
            }
            pending = true;
            // ajax请求
            var path;
            if(isNew){
                 path= Config.getUrlPreFix()+'/user/address/save';
            }else{
                path= Config.getUrlPreFix()+'/user/address/update';
            }
            console.log(path);
            $.ajax({
                url: path,
                contentType: 'application/json',
                method: 'POST',
                data: JSON.stringify(address),
                success: function (res) {
                    // 成功：刷新当前地址页面
                    if (res.code == 200) {
                        alert('地址保存成功！')
                        window.location.href = Config.getUrlPreFix() + '/user/address/list'
                        return;
                    }
                    // 出错
                    alert(res.message);
                    return;
                },
                // 失败： 提示错误信息
                error: function () {
                    alert("请求出错！");
                    return
                },
                complete(){
                    pending = false;
                }
            });
        }
    }

    // 新增地址按钮
    function addNewAddress() {
        // 判断新增地址按钮是否已经点击
        if (isNew) return;
        isNew = true;
        $('#editAddressFrom').hide();
        // 清空编辑地址表单
        cleanAddress();
        $('#editAddressFrom').show();
    }

    // 填入地址信息
    function writeAddress(address) {
        $('#addressId').val(address.id);
        $('#addressName').val(address.name);
        $('#addressDetail').val(address.detailAddress);
        $('#addressCode').val(address.code);
        $('#addressPhone').val(address.phone);
    }

    // 清空地址信息
    function cleanAddress() {
        $('#addressId').val('');
        $('#addressName').val('');
        $('#addressDetail').val('');
        $('#addressCode').val('');
        $('#addressPhone').val('');
    }

    // 获取地址信息
    function getAddress() {
        var address = {
            id: $('#addressId').val(),
            name: $('#addressName').val(),
            detailAddress: $('#addressDetail').val(),
            code: $('#addressCode').val(),
            phone: $('#addressPhone').val(),
        }
        return address;
    }

    // 校验地址信息
    function checkAddress(address) {
        if (address == null) {
            alert("出错了");
            return false;
        }
        if (address.name == null || address.name.trim() == '') {
            alert("收件人不能为空");
            return false;
        }
        if (address.detailAddress == null || address.detailAddress.trim() == '') {
            alert("详细地址不能为空");
            return false;
        }
        // 邮编不校验
        if (address.phone == null || address.phone.trim() == '') {
            alert("手机号码不能为空");
            return false;
        }
        return true;
    }
    // 设为默认地址
    function setDefaultAddress(addressId){
        console.log(addressId)
        if (pending) {
            return;
        }
        pending = true;
        $.ajax({
            url: Config.getUrlPreFix()+"/user/address/changeDefault",
            contentType: 'application/x-www-form-urlencoded',
            method: 'POST',
            data: {
                id:addressId
            },
            success: function (res) {
                // 成功：刷新当前地址页面
                if (res.code == 200) {
                    alert('地址修改成功！')
                    window.location.href = Config.getUrlPreFix() + '/user/address/list'
                    return;
                }
                // 出错
                alert(res.message);
                return;
            },
            // 失败： 提示错误信息
            error: function () {
                alert("请求出错！");
                return
            },
            complete(){
                pending = false;
            }
        });
    }


</script>
